
import style from '../css/home.css'
import React, { useEffect, useState } from 'react';
import Sercer from '../unite/request'
import { Menu, Layout, Button } from 'antd';
const { Header, Sider, Content } = Layout;


export default function (props) {
    const [openKeys, setOpenKeys] = useState([]);

    const Push = (e) => {
        console.log(e);
        props.history.push(e.key)
    }
    useEffect(async () => {
        const re = await Sercer.get('menus')
        console.log(re.data);
        const list = []
        re.data.forEach(item => {
            let obj = {}
            obj.label = item.authName
            obj.key = item.path
            obj.children = []
            if (item.children) {
                item.children.forEach(child => {
                    let obj1 = {}
                    obj1.label = child.authName
                    obj1.key = child.path
                    obj.children.push(obj1)
                })
            }
            list.push(obj);
        })
        console.log(list);
        setOpenKeys(list)
    }, [])
    const tuichu = () => {
        localStorage.removeItem("token");
        props.history.push("/login");
    }


    return (

        <Layout className={style.app} style={{ height: "100%" }}>
            <Header className={style.header} >
                <div className="left">
                    <span>电商后台管理</span>
                    <Button className={style.button} onClick={() => tuichu()}>退出</Button>
                </div>
            </Header>
            <Layout className={style.apptow} style={{ height: '100%', overflowY: 'scroll' }}>
                <Sider className={style.sider}>
                    <div >
                        <Menu className={style.menuapp}
                            mode="inline"
                            theme="light "
                            onClick={(e) => Push(e)}

                            items={openKeys}
                        />
                    </div>



                </Sider>
                <Content className={style.conter}>

                    {props.children}

                </Content>
            </Layout>
        </Layout>


    )
}

